<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<!--

轮播图区域
     1. 结构    html
     2. 布局    css
     3. 动态    javascript
    A.html    html   css   js  复制   代码冗余
    B.html    html   css   js  复制    代码的复用率低

组件化开发
    组件:  将实现特定功能的html，css，javascript以及静态资源组合在一起就行形成了一个组件
           轮播图   html  css  js  放在一个文件中  组件    xxx.vue
    vue项目   spa  单页面应用    index.html <- login.vue   register.vue    路由


组件的分类：
   1. 编写形式
        1.1 单文件组件       以独立的 .vue文件编写的组件
        1.2 非单文件组件     将组件嵌套在html页面中  且可以编写多个
   2. 作用域          组件注册的位置决定组件的作用域
        2.1 全局组件    注册在 Vue
        2.2 局部组件    注册在其他组件中的组件

       2.3  组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，
       例如 data、computed、watch、methods 以及生命周期钩子等。
       仅有的例外是像 el 这样根实例特有的选项, data在组件中使用时需要定义成函数 不能在写成对象

       2.4 全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，
           也包括其组件树中的所有子组件的模板中
-->

<div id="app">
    <!--    组件标签-->
    <hello></hello>
    <hello></hello>
</div>


<script>
    <!--    创建组件  全局组件  Vue    组件的本质就是vue实例-->
    Vue.component('hello', {
        template: '<h1>Hello Vue</h1>'
    })
    //  组件   根组件
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
</script>
</body>
</html>
